<template>
  <div class="system-data echart-part" style="padding-top: 0.1rem">
    <div class="echart-title">{{para.title}}</div>
    <div :id="para.id" class="echart_content"></div>
  </div>
</template>
<script>
  import statService from '@/api/stat/stat'
  const echarts = require('echarts')
  let barWidth = '16%'
  let endValue = 5
  let myChart
  //初始化数据
  let option = {
    color: ['#4ce658', '#f7ff2b'],
    barGap: 0.5,
    dataZoom: [
      {
        // yAxisIndex: 0,
        show: false,
        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: endValue // 一次性展示个数。
      }
    ],
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        let axisValue = params[0].axisValue
        let seriesName_0 = params[0].seriesName
        let value0 = params[0].value
        let seriesName_1 = params[1].seriesName
        let value1 = params[1].value

        return `
                <span style="color: #378FDD">${seriesName_0}条数：${value0}</span><br>
                <span style="color: #F0AE2D">${seriesName_1}条数：${value1}</span><br>`
      },
      axisPointer: {
        type: 'shadow'
      },
      alwaysShowContent: true,
      borderWidth: 0,
      extraCssText: 'width:109px;height:53px;backGround:url("shujukuang.svg")', //echarts不能调用编译后的资源，所以把背景图片放在public
    },
    legend: {
      data: ['导入', '导出'],
      show: false,
      textStyle: {
        color: 'white'
      }
    },
    grid: {
      top: '15%',
      left: 0,
      right: 0,
      bottom: '3%',
      show: false, // 默认不显示边框
      borderColor: 'white', // 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(27,56,63,1)', // 分割线颜色
          type: 'dashed',
          width: 1.5
        }
      },
      axisTick: {show: false},
      axisLine: {show: false},
      axisLabel: {
        show: true,
        color:'rgba(120,199,236,0.6)'
      }
    },
    xAxis: {
      type: 'category',
      data: [],
      axisTick: {show: false},
      axisLine: {show: false},
      axisLabel: {
        color: 'rgba(120,199,236,1)',
        interval: 0,

      },
    },

    series: [
      {
        name: '导入',
        type: 'bar',
        data: [],
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(6,60,73,1)',
          borderWidth: 1,
          borderColor: '#067884',
          shadowBlur: 11,
          shadowColor: "rgba(6,60,73,1)",
        },
        smooth: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0.01, color: 'rgba(55,143,221,1)'},
            {offset: 1, color: 'rgba(0,41,72,0.2)'}
          ]),

        },
        tooltip: {
          textStyle: {
            color: 'red'
          }
        },
        barWidth: barWidth,

      },
      {
        name: '导出',
        type: 'bar',
        data: [],
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(6,60,73,1)',
          borderWidth: 1,
          borderColor: '#067884',
          shadowBlur: 11,
          shadowColor: "rgba(6,60,73,1)",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0.03, color: 'rgba(240,174,45,1)'},
            {offset: 1, color: 'rgba(0,41,72,0.2)'}
          ])
        },
        barWidth: barWidth,
      }
    ]
  }
  export default {
    name: 'system-data',
    props: {
      para: {}
    },
    data() {
      return {
        isSet: false,
        timer: '',
        playTimer: null, //轮播定时器
        title: '',
        dataType: '',
        reload: false,
        new: [false, false],
        category: [],
        option: option,
      }
    },
    mounted() {
      this.getData()
    },
    beforeDestroy() {
      if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer); //关闭
      }
    },
    watch: {
      reload(value) {
        if (value) {
          this.option.xAxis.data = this.category
          this.draw()
        } else {
          return
        }
      }
    },
    methods: {
      autoMove() {
        let len = this.option.series[0].data.length
        if (len <= endValue) {
          return
        }
        this.playTimer = setInterval(() => {
          // clearInterval(this.timeOut)
          // 每次向后滚动一个，最后一个从头开始。
          // if(this.stopMove){ return }
          if (Number(this.option.dataZoom[0].endValue) === len - 1) {
            this.option.dataZoom[0].endValue = endValue
            this.option.dataZoom[0].startValue = 0
          } else {
            this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1
            this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1
          }
          myChart.setOption(this.option)
        }, 2000)
        // console.log('----设置轮播定时器------')
      },
      stopPlay() {
        clearInterval(this.playTimer)
        this.playTimer = null
        //  console.log('取消定时器，停止轮播' + this.playTimer)
      },
      getData() {
        this.getDataType(0)
        this.getDataType(1)
      },
      getDataType(dataType) {
        let category = []
        let data = []
        this.reload = false
        this.new[dataType] = false
        let param = {dataType: dataType}
        statService.querySystemCount(param).then(res => {
          if (res.success) {
            for (var i = 0; i < 1; i++) {
              res.data.forEach(item => {
                item.count = (parseInt(item.count))
                data.push(parseInt(item.count))
                category.push(item.systemName)
              })
            }
            this.new[dataType] = true
            this.option.series[dataType].data = data
            this.category.length ? {} : (this.category = category)
            this.reload = (this.new[0] && this.new[1]) ? true : false
          }
        }).catch((err) => console.log(err)) // 捕获异常;
      },
      draw() {
        let div = document.getElementById(this.para.id)
        if (!myChart || !div.innerHTML) {
          myChart = echarts.init(document.getElementById(this.para.id))
        }
        //   console.log('---------draw------------')
        if (this.playTimer) {
          this.stopPlay()
        }
        myChart.setOption(this.option)
        myChart.on('mouseover', this.stopPlay)
        myChart.on('mouseout', this.autoMove)
        this.autoMove()
        window.addEventListener('resize', () => myChart.resize(), false)
      }
    },
    destroyed() {
      window.onresize = null
      clearTimeout(this.timer)
    }
  }
</script>
<style scoped>
  .echart-title {
    display: flex;
    align-items: center;
    padding-left: 0.6rem;
    height: 0.5rem;
    background: url("../../../assets/images/large-screen/neirong_ng.svg") no-repeat;
    background-size: 100%;
    margin-bottom: .1rem;

  }

  .echart-title:before {
    content: url("../../../assets/images/large-screen/juxing.svg");
    position: absolute;
    left: 0.3rem;
    top: auto;
  }

  .echart_content {
    /*background: url("../../../assets/images/large-screen/zhengwen.svg") no-repeat;*/
    background-size: 100% 100%;
    background-color: rgba(7, 23, 30, 0.5);

  }

  .system-data {
    padding-top: 0.1rem
  }

  .echart_content {
    color: red !important;
  }
</style>

